<template>
	<view>
		<view class="search-content pr">

			<view class="search-icon dis-inline-block pa" @tap="search_icon_event">
				<image src="../../static/3x/9.png"></image>
			</view>
			<input type="text" confirm-type="search" class="round wh-auto dis-block" :placeholder="propPlaceholder"
				:placeholder-class="propPlaceholderClass" :value="propDefaultValue" @click="search_input_event"
				:style="'color:'+propTextColor+';background:'+propBgColor+';'+((propBrColor || null) != null ? 'border:1px solid '+propBrColor+';' : '')">
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {};
		},
		components: {},
		props: {
			propUrl: {
				type: String,
				default: '/pages/goods-search/goods-search'
			},
			propFormName: {
				type: String,
				default: 'keywords'
			},
			propPlaceholder: {
				type: String,
				default: '其实搜索很简单 ^_^!'
			},
			propDefaultValue: {
				type: String,
				default: ''
			},
			propPlaceholderClass: {
				type: String,
				default: 'cr-grey'
			},
			propTextColor: {
				type: String,
				default: '#666'
			},
			propBgColor: {
				type: String,
				default: '#f0f0f0'
			},
			propBrColor: {
				type: String,
				default: ''
			},
			propIsRequired: {
				type: Boolean,
				default: true
			},
			propIsOnEvent: {
				type: Boolean,
				default: false
			},
			propIcon: {
				type: String,
				default: 'search'
			},
			propIconColor: {
				type: String,
				default: '#b7b7b7'
			},
			propIsIconOnEvent: {
				type: Boolean,
				default: false
			},
		},
		methods: {
			// 搜索事件
			search_input_event(e) {
				uni.navigateTo({
					url: '/pages/goods-search/goods-search'
				});
			},

			// icon事件
			search_icon_event(e) {
				// 是否回调事件
				if (this.propIsIconOnEvent) {
					this.$emit('onicon', {});
				}
			}
		}
	};
</script>
<style>
	.search-content {}

	.pa {
		position: absolute;
	}

	.search-content image {
		display: flex;
		margin-left: 1000%;
		z-index: 1;
		width: 20px;
		height: 20px;
		top: 10px;
	}

	.search-content input {
		font-size: 14px;
		padding: 0 10px 0 20px;
		line-height: 40px;
		width: 100%;
		height: 40px;
		margin: 0 auto;
		margin-left: 7%;
		margin-top: -20px;
		border-radius: 865px;
		background: #FFFFFF !important;
		box-sizing: border-box;
		border: 1px solid #88A58A;
		text-align: center;
		color: grey;
	}

	.round {
		border-radius: 10px !important;
		border: solid 1px #cccccc;
	}

	.search-content-fixed {
		position: fixed !important;
		top: 0;
		z-index: 11;
		padding-bottom: 20rpx;
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding-top: 25px;
		/* #ifdef H5 || APP */
		padding-top: 15rpx !important;
		padding-bottom: 15rpx !important;
		/* #endif */
	}
</style>
